<template>
    <div class="dashboard">
        <div class="page-header">
            <h1>数据概览</h1>
            <p>实时监控平台运营数据</p>
        </div>

        <!-- 统计卡片 -->
        <a-row :gutter="16" class="stats-cards">
            <a-col :span="6">
                <a-card>
                    <a-statistic title="在线用户" :value="onlineUserCount" :value-style="{ color: '#1890ff' }">
                        <template #prefix>
                            <UsergroupAddOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">实时</span>
                        <span class="change-text">当前在线</span>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="6">
                <a-card>
                    <a-statistic title="总用户数" :value="statistics.totalUsers" :value-style="{ color: '#3f8600' }">
                        <template #prefix>
                            <UserOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">+12%</span>
                        <span class="change-text">较上月</span>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="6">
                <a-card>
                    <a-statistic title="总课程数" :value="statistics.totalCourses" :value-style="{ color: '#1890ff' }">
                        <template #prefix>
                            <BookOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">+5%</span>
                        <span class="change-text">较上月</span>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="6">
                <a-card>
                    <a-statistic title="今日收入" :value="statistics.todayRevenue" :value-style="{ color: '#cf1322' }"
                        prefix="¥">
                        <template #prefix>
                            <DollarOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">+8%</span>
                        <span class="change-text">较昨日</span>
                    </div>
                </a-card>
            </a-col>
        </a-row>

        <!-- 数据展示区域 -->
        <a-row :gutter="16" class="data-section">
            <a-col :span="12">
                <a-card title="用户增长趋势" class="data-card">
                    <div class="data-container">
                        <p>用户增长数据展示区域</p>
                        <p>当前总用户：{{ statistics.totalUsers }}</p>
                        <p>活跃用户：{{ statistics.activeUsers }}</p>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="12">
                <a-card title="收入统计" class="data-card">
                    <div class="data-container">
                        <p>收入统计数据展示区域</p>
                        <p>今日收入：¥{{ statistics.todayRevenue }}</p>
                        <p>总收入：¥{{ statistics.totalRevenue }}</p>
                    </div>
                </a-card>
            </a-col>
        </a-row>

        <!-- 排行榜 -->
        <a-row :gutter="16" class="ranking-section">
            <a-col :span="8">
                <a-card title="热门课程排行" class="ranking-card">
                    <a-list>
                        <a-list-item v-for="(course, index) in topCourses" :key="course.id">
                            <a-list-item-meta>
                                <template #avatar>
                                    <a-avatar :style="{ backgroundColor: getRankColor(index) }">
                                        {{ index + 1 }}
                                    </a-avatar>
                                </template>
                                <template #title>
                                    <a href="#">{{ course.title }}</a>
                                </template>
                                <template #description>
                                    {{ course.students }}人学习
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </a-list>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="最新用户" class="ranking-card">
                    <a-list>
                        <a-list-item v-for="user in latestUsers" :key="user.id">
                            <a-list-item-meta>
                                <template #avatar>
                                    <a-avatar :src="user.avatar">{{ user.name.charAt(0) }}</a-avatar>
                                </template>
                                <template #title>
                                    <a href="#">{{ user.name }}</a>
                                </template>
                                <template #description>
                                    {{ user.joinTime }}
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </a-list>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="系统通知" class="ranking-card">
                    <a-list>
                        <a-list-item v-for="notice in systemNotices" :key="notice.id">
                            <a-list-item-meta>
                                <template #avatar>
                                    <a-avatar :style="{ backgroundColor: notice.type === 'warning' ? '#faad14' : '#52c41a' }">
                                        <ExclamationCircleOutlined v-if="notice.type === 'warning'" />
                                        <CheckCircleOutlined v-else />
                                    </a-avatar>
                                </template>
                                <template #title>
                                    <a href="#">{{ notice.title }}</a>
                                </template>
                                <template #description>
                                    {{ notice.time }}
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </a-list>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
    UserOutlined,
    BookOutlined,
    DollarOutlined,
    TeamOutlined,
    ExclamationCircleOutlined,
    CheckCircleOutlined,
    UsergroupAddOutlined
} from '@ant-design/icons-vue'
import { onlineUserCount } from '@/utils/websocketManager'

// 统计数据
const statistics = ref({
    totalUsers: 12580,
    totalCourses: 456,
    todayRevenue: 12580,
    totalRevenue: 1258000,
    activeUsers: 3256
})

// 热门课程
const topCourses = ref([
    { id: 1, title: 'AI智能体开发实战', students: 1256 },
    { id: 2, title: '机器学习算法精讲', students: 892 },
    { id: 3, title: '深度学习框架应用', students: 654 },
    { id: 4, title: '数据科学入门', students: 543 },
    { id: 5, title: 'Python编程基础', students: 432 }
])

// 最新用户
const latestUsers = ref([
    { id: 1, name: '张三', avatar: '', joinTime: '2小时前' },
    { id: 2, name: '李四', avatar: '', joinTime: '4小时前' },
    { id: 3, name: '王五', avatar: '', joinTime: '6小时前' },
    { id: 4, name: '赵六', avatar: '', joinTime: '8小时前' },
    { id: 5, name: '钱七', avatar: '', joinTime: '10小时前' }
])

// 系统通知
const systemNotices = ref([
    { id: 1, title: '系统维护通知', type: 'warning', time: '2小时前' },
    { id: 2, title: '新功能上线', type: 'success', time: '4小时前' },
    { id: 3, title: '安全更新完成', type: 'success', time: '6小时前' },
    { id: 4, title: '服务器优化', type: 'warning', time: '8小时前' }
])

// 获取排名颜色
const getRankColor = (index: number) => {
    const colors = ['#f5222d', '#fa8c16', '#faad14', '#52c41a', '#1890ff']
    return colors[index] || '#d9d9d9'
}

onMounted(() => {
    console.log('加载管理员仪表板数据')
})
</script>

<style scoped>
.dashboard {
    padding: 24px;
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 600;
}

.page-header p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.stats-cards {
    margin-bottom: 24px;
}

.stat-change {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.change-value {
    font-size: 14px;
    font-weight: 500;
}

.change-value.positive {
    color: #52c41a;
}

.change-value.negative {
    color: #f5222d;
}

.change-text {
    font-size: 12px;
    color: #999;
}

.data-section {
    margin-bottom: 24px;
}

.data-card {
    height: 300px;
}

.data-container {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
}

.ranking-section {
    margin-bottom: 24px;
}

.ranking-card {
    height: 400px;
}

:deep(.ant-card-head-title) {
    font-weight: 600;
    color: #333;
}

:deep(.ant-list-item) {
    padding: 12px 0;
}

:deep(.ant-list-item-meta-title) {
    margin-bottom: 4px;
}

:deep(.ant-list-item-meta-description) {
    font-size: 12px;
    color: #999;
}
</style>